﻿<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320"/>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta http-equiv="cleartype" content="on">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

	<title>Slide Menu by Tegan Snyder</title>

	<!--Include JQM and JQ-->
	<link rel="stylesheet" href="css/themes/jqmfb.min.css" />
	<link rel="stylesheet" href="css/jquery.mobile.structure.min.css" />
	<script src="js/jquery-1.8.3.min.js"></script>
	<script src="js/jquery.animate-enhanced.min.js"></script>
	
	<!--JQM globals you can edit or remove file entirely... note it needs to be loaded before jquerymobile js -->
	<script src="js/jqm.globals.js"></script>
	
	<script src="js/jquery.mobile.min.js"></script>

	<!--JQM SlideMenu-->
	<link rel="stylesheet" href="css/jqm.slidemenu.css" />
	<script src="js/jqm.slidemenu.js"></script>
</head>
<body>

	<div id="slidemenu">

		<div id="profile">
			<img src="img/tegan.jpg">
			<div class="profile_info"><strong>郭飞飞</strong><br><small>软件工程师</small><a href="#main_page"><img src="img/smico3.png" title="金身会员"></a></div>
		</div>

		<h3>菜单</h3>

		<ul>
			<!--
               <li><a href="#main_page"><img src="img/smico3.png">我的首页</a></li>
               -->
			<li><a href="#another_page"><img src="img/smico2.png">我的资料</a></li>
			<li><a href="#another_page2"><img src="img/smico5.png">媒人</a></li>
			<li><a href="test.html" rel="external"><img src="img/smico4.png">礼品</a></li>
			<li><a href="#another_page3"><img src="img/smico6.png">隐私设置</a></li>
		</ul>

		<h3>特色服务</h3>

		<ul>
			<li><a href="test.html" rel="external"><img src="img/smico5.png">相亲广场</a></li>
			<li><a href="test.html" rel="external"><img src="img/smico4.png">秘密花园</a></li>
			<!--<li><a href="#another_page3"><img src="img/smico3.png">非诚勿扰</a></li> 
              -->
		</ul>

	</div>

	<div data-role="page" id="main_page" data-theme="a">

		<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding="false">
			<a href="#" data-slidemenu="#slidemenu" data-slideopen="false" data-icon="smico" data-corners="false" data-iconpos="notext">Menu</a>
			<h1>单身243天</h1>
		</div>

		<div data-role="content">
			
            <form method="post" action="demoform.asp">
              <div data-role="fieldcontain">
                <input type="text" name="short_text" data-inline="true" id="short_text" placeholder="说出心声，找到真爱..">
               <input type="submit" data-inline="true" value="发表">
              </div>
              <!--
              <ul data-role="listview" data-inset="true">
                  <li><a href="#">私信<span class="ui-li-count">25</span></a></li>
                  <li><a href="#">今日访客<span class="ui-li-count">432</span></a></li>
                  <li><a href="#">我的关注<span class="ui-li-count">7</span></a></li>
                </ul>
                 -->
                 <div data-role="collapsible-set">
      <div data-role="collapsible">
        <h3>私信(3/10)</h3>
  	    <div data-role="collapsible">
            <h4>郭月老将您与一位软件工程师牵线</h4>
            <p>牵线理由：该工程师人品端正，个子高，有能力买房<a href="#pagetwo" data-role="button" data-inline="true">接受牵线</a></p>
          </div>

            <div data-role="collapsible">
            <h4>一名28岁外科医生，想和你牵线聊聊</h4>
            <p>牵线理由：我性格开朗，个子高，有能力买房<a href="#pagetwo" data-role="button" data-inline="true">接受牵线</a></p>
            </div>

            <div data-role="collapsible">
            <h4>一名29岁公务员，想和你牵线聊聊</h4>
            <p>牵线理由：我性格开朗，个子高，有房<a href="#pagetwo" data-role="button" data-inline="true">接受牵线</a></p>
            </div>
      </div>
      <div data-role="collapsible">
        <h3>访客(2/5)</h3>
        <p>我是访客的内容。</p>
            <ul data-role="listview" data-inset="true">
      <li><a href="#"><img src="img/美女1.png"><h2>张三</h2><p>魅力指数：8</p><p>年龄：27</p><p class="ui-li-aside">今天9:20</p></a></li>
      <li><a href="#"><img src="img/美女2.png"><h2>李四</h2><p>魅力指数：9</p><p>年龄：29</p><p class="ui-li-aside">今天8:20</p></a></li>
      <li><a href="#"><img src="img/美女3.png"><h2>王麻子</h2><p>魅力指数：6</p><p>年龄：24</p><p class="ui-li-aside">昨天20:20</p></a></li>
    </ul>
       
      </div>
      <div data-role="collapsible"  data-collapsed="false">
        <h3>我的菜</h3>
        <h3>媒人推荐</h3>
        <ul data-role="listview" data-inset="true">
      <li><a href="#"><img src="img/美女1.png"><h2>张三(27岁)</h2><p>魅力：8 </p><p>来自红娘：钱老师</p><p class="ui-li-aside" style="white-space:pre-wrap;">推荐理由：人品好</p></a></li>
      <li><a href="#"><img src="img/美女2.png"><h2>李四(24岁)</h2><p>魅力指数：9</p><p>来自红娘：钱老师</p><p class="ui-li-aside" style="white-space:pre-wrap;">推荐理由：家境好</p></a></li>
      <li><a href="#"><img src="img/美女3.png"><h2>王麻子(26岁)</h2><p>魅力指数：6</p><p>来自红娘：钱老师</p><p class="ui-li-aside" style="white-space:pre-wrap;">推荐理由：车放全</p></a></li>
    </ul>
    
    <h3>系统推荐</h3>
        <ul data-role="listview" data-inset="true">
      <li><a href="#"><img src="img/美女1.png"><h2>张三</h2><p>魅力指数：8</p><p>年龄：27</p><p class="ui-li-aside" style="white-space:pre-wrap;">星座最搭</p></a></li>
      <li><a href="#"><img src="img/美女2.png"><h2>李四</h2><p>魅力指数：9</p><p>年龄：29</p><p class="ui-li-aside" style="white-space:pre-wrap;">生辰八字最配</p></a></li>
      <li><a href="#"><img src="img/美女3.png"><h2>王麻子</h2><p>魅力指数：6</p><p>年龄：24</p><p class="ui-li-aside" style="white-space:pre-wrap;">志趣相投</p></a></li>
    </ul>
    
      </div>
      <!--
      <div data-role="collapsible">
        <h3>本地活动</h3>
        <p>我是可折叠的内容。</p>
      </div>
      -->
      
    </div>
               
            </form>
            
		</div>
        
            <div data-role="footer"  data-position="fixed" data-tap-toggle="false" style="position: fixed;"  data-id="footernav">
        <div data-role="navbar">
          <ul>
            <li><a href="#" data-icon="star"  class="ui-btn-active ui-state-persist">首页</a></li>
            <li><a href="#" data-icon="info">我的牵线</a></li>
            <li><a href="#" data-icon="grid">相册</a></li>
            <li><a href="#" data-icon="arrow-r">好友</a></li>
          </ul>
        </div>
      </div>


	</div>
	
	<div data-role="page" id="another_page" data-theme="a">

		<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding="false">
			<a href="#" data-slidemenu="#slidemenu" data-slideopen="false" data-icon="smico" data-corners="false" data-iconpos="notext">Menu</a>
			<h1>Slide Menu</h1>
		</div>

		<div data-role="content">
		
			<h2>This is an example of another page loaded</h2>
			<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
		</div>

	</div>
	
	<div data-role="page" id="another_page2" data-theme="a">

		<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding="false">
			<a href="#" data-slidemenu="#slidemenu" data-slideopen="false" data-icon="smico" data-corners="false" data-iconpos="notext">Menu</a>
			<h1>Slide Menu</h1>
		</div>

		<div data-role="content">
		
			<h2>Lookie HERE!</h2>
			<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</p>
		</div>

	</div>
	
	<div data-role="page" id="another_page3" data-theme="a">

		<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding="false">
			<a href="#" data-slidemenu="#slidemenu" data-slideopen="false" data-icon="smico" data-corners="false" data-iconpos="notext">Menu</a>
			<h1>Slide Menu</h1>
		</div>

		<div data-role="content">
		
			<h2>Some stuff and stuff</h2>
			<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
		</div>

	</div>
	
	
</body>
</html>